<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="menuVO" class="demo-form-inline">
          <el-form-item label="菜单名称"  label-width="70px">
            <el-input v-model="menuVO.name" placeholder="请输入菜单名" clearable></el-input>
          </el-form-item>
          <el-form-item label="父菜单" label-width="70px">
            <el-select v-model="menuVO.parentId" placeholder="请选择">
              <el-option
                v-for="item in parentMenuList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">
                <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.id }}</span>
              </span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 10px">
            <el-button type="primary" icon="el-icon-refresh" @click="resertroleVO">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="findMenuList">查询</el-button>
            <!--            <el-button type="success" icon="el-icon-plus" @click="show" v-if="" v-has-permission="'role:add'">添加</el-button>-->
            <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
            <el-button type="warning" icon="el-icon-edit" @click="show1(menuId)">编辑</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--表格内容-->
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        :data="menuList"
        border
        style="width: 100%"
        max-height="400px"
        @selection-change="handleSelectionChange"
        @row-click="updateThisRoleId"
      >
        <el-table-column
          id=""
          type="selection"
          prop="id"
          label="全选"
          width="50">
        </el-table-column>
        <el-table-column
          prop="id"
          label="菜单编号"
          width="110">
        </el-table-column>
        <el-table-column
          prop="name"
          label="菜单名称"
          width="110">
        </el-table-column>
        <el-table-column
          sortable
          prop="parentName"
          label="父菜单名称"
          width="180">
          <template slot-scope="scope">
            {{scope.row.parentName == null ? '无父级菜单': scope.row.parentName}}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="available"
          label="菜单状态"
          width="150">
          <template slot-scope="scope">
            {{scope.row.available == 1 ? '启用': '未启用'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNum"
          label="菜单排序"
          width="100">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="show1(scope.row.id)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteMenu(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=currentPage
        :page-sizes="[6, 10, 20, 30]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    <MenuAdd
      :addVisible="addVisible"
      @changeShowAdd="changeShowAdd"
    >
    </MenuAdd>
      <MenuEdit
      :upVisible="upVisible"
      :menuVO="menuVO"
      @changeShowUp="changeShowUp"
      >
      </MenuEdit>

    </el-card>
  </div>

</template>

<script>
import {findMenusByPage} from '@/api/menu'
import {findParentMenuIdAndName} from '@/api/menu'
import MenuAdd from '@/views/menus/MenuAdd'
import MenuEdit from '@/views/menus/MenuEdit'
import {findMenuByMenuId} from '@/api/menu'
import ImportExcel from '@/views/ImportExcel'
import { deleteRoleByRoleId } from '@/api/role'
import {deleteMenuByMenuId} from '@/api/menu'

export default {
  name: 'Menu',
  components:{
    MenuAdd,
    MenuEdit
  },
  data(){
    return {
      menuId:'',
      menuVO:{},
      parentMenuList:[],
      menuList:[],
      multipleSelection:[],
      currentPage: 1,
      pageSize: 6,
      total : 100,
      addVisible:false,
      upVisible:false,
    }
  },
  methods:{
    resertroleVO(){
      this.menuVO = {}
    },
    findMenuList(){
      findMenusByPage(this.currentPage,this.pageSize,this.menuVO).then(res=>{
        this.menuList = res.data.data
      })
    },
    show(){
      this.addVisible = true
    },
    show1(MenuId){
      if(MenuId == null || MenuId == ''){
        const h = this.$createElement;
        this.$notify({
          title: '请选择一条数据',
          message: h('i', { style: 'color: red' }, '请选择一个菜单')
        });
      }else {
        this.upVisible = true
        findMenuByMenuId(MenuId).then(res=>{
          this.menuVO = res.data.data
        })
      }
    },
    handleSelectionChange(val) {
      console.log("handleSelectionChange")
      this.multipleSelection = val;
    },
    updateThisRoleId(event){
      this.menuId = event.id
    },
    deleteMenu(menuId){
      this.$confirm('此操作将永久删除该菜单信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenuByMenuId(menuId).then(res =>{
          this.findMenusByPages()
          return this.$message.error(res.data.msg)
        })
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findMenusByPages()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.findMenusByPages()
    },
    findMenusByPages(){
      findMenusByPage(this.currentPage,this.pageSize,this.menuVO).then(res=>{
        this.menuList = res.data.data
      })
    },
    findParentMenuIdAndNames(){
      findParentMenuIdAndName().then(res=>{
        this.parentMenuList = res.data.data
        let menu ={
          id : 0,
          name:'无父菜单'
        }
        this.parentMenuList.push(menu)
      })
    },
    changeShowAdd(data){
      this.findMenusByPages()
      if(data === 'false'){
        this.addVisible =false
        this.menuId=''
      }else{
        this.addVisible =true
      }
    },
    changeShowUp(data){
      this.menuVO = {}
      this.findMenusByPages()
      if(data === 'false'){
        this.upVisible =false
        this.menuId=''
      }else{
        this.upVisible =true
      }
    }
  },
  created () {
    this.findMenusByPages()
    this.findParentMenuIdAndNames()
  }

}
</script>

<style scoped>

</style>
